<template>
    <div>
      <el-form ref="form" :model="queryInfo" >
        <!-- 搜索条件 -->
        <el-row :gutter="20" class="goodsindex-queryInfo">

          <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2" style="margin-left: 50px;margin-top: 10px;">
            <el-button type="success" class="goodsindex-queryInfo-li" size="small" @click="addForm()">添加</el-button>
          </el-col>
        </el-row>
      </el-form>
        <el-table
                :data="tableData"
                style="margin-bottom: 20px;"
                row-key="menu_id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                :header-cell-style="rowClass"
                :cell-style="cellStyle"
        >
            <el-table-column
                    prop="menu_id"
                    label="id"
                    sortable
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="is_delete_text"
                    label="状态"
                    width="180">
            </el-table-column>

          <el-table-column
              prop="sort"
              label="排序"
              width="180">
          </el-table-column>

            <el-table-column
                    prop="menu_name"
                    label="菜单名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="menu_code"
                    label="菜单编码"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="node_type_text"
                    label="菜单类型"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="link_url"
                    label="跳转链接"
                    width="180">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template v-slot:default="scope">
                    <el-button type="text" size="small" @click="editForm(scope.$index,scope.row)">编辑</el-button>
                </template>
            </el-table-column>

        </el-table>
        <MenuSave :visible-child.sync="visible" :child-form="Form" :menu-id="menuId" :table-tree="TableTree"></MenuSave>
    </div>
</template>
<script>
    import MenuSave from "@/views/menu/MenuSave";
    import {menuAll} from "@/api/api";
    export default {
        data() {
            return {
                visible:false,
                tableData: [],
                queryInfo:{

                },
                menuId:-1,
                Form:{
                //    传递给子组件
                  menu_name:"",
                  menu_code:"",
                  node_type:1,
                  sort:0,
                  is_delete:0,
                  menu_parent_id:null,
                },
                TableTree:[
                //   这里是传递给新增组件和修改组件的，避免出现点击新增和修改时候还要请求一次后台
                ],
            }
        },
        components:{
            MenuSave
        },
        methods: {
            addForm(){
                this.visible = true;
            },
            editForm(index,value){
              console.log("this1",this.Form)
                this.Form = {
                  menu_name:value.menu_name,
                  menu_code:value.menu_code,
                  node_type:value.node_type,
                  sort:value.sort,
                  is_delete:value.is_delete,
                  menu_parent_id: value.menu_parent_id === 0 ? null : value.menu_parent_id
                };
                this.menuId   = value.menu_id;
                this.visible = true;
            },

            //查询菜单所有数据
          menu(data){
            menuAll(data).then((res) =>{
              if (res.code === 200){
                // 因为没有分页所以不需要 res.data.data
                this.tableData = res.data;
                // 这里是因为后端进行树循环，就不在前端进行判断了，避免浪费，同时也避免出现循环一层的情况出现
                this.TableTree = res.data;
              }
            }).catch(error =>{
              this.$message({
                type:'error',
                message:error.message || 'Error'
              });
            })
          },

            //row,  每一行上的数据
            //column, 每一列上的数据
            //rowIndex,  行数的下标从0开始
            //columnIndex   列数下标从0开始
            //设置表头的颜色
            rowClass({ row, rowIndex}) {
                // console.log(rowIndex) //表头行标号为0
                // return 'background:red'
            },
            //设置指定行、列、具体单元格颜色
            cellStyle({row, column, rowIndex, columnIndex}) {
                // if (rowIndex === 1 && columnIndex === 2) { //指定坐标rowIndex ：行，columnIndex ：列
                //     return 'background:red' //rgb(105,0,7)
                // } else {
                //     return ''
                // }
                // console.log("row",row);

                if (columnIndex === 1) { //指定坐标rowIndex ：行，columnIndex ：列
                    //字体颜色
                    return "color:red;cursor: pointer";
                    // return 'background:red' //rgb(105,0,7)
                } else {
                    return ''
                }
                // if ('is_delete_text' in row){
                //     return "color:red;cursor: pointer";
                // }

            }
        },
        created() {
          this.menu();
        }
    }
</script>